@charset "utf-8";
@component-namespace t {
  @b notice {
    padding: var(--notice-padding);
    position: relative;
    margin-bottom: var(--notice-margin-bottom);
    background: var(--color-dark-white);
    @m text {
      @e message {
        font-size: var(--notice-text-message-font-size);
        color: var(--notice-text-message-color);
        margin-bottom: var(--notice-text-message-margin-bottom);
      }
      @e description {
        font-size: var(--notice-text-description-font-size);
        color: var(--notice-text-description-color);
      }
    }
    @m tomato {
      @e message {
        font-size: var(--notice-text-message-font-size);
        color: var(--notice-text-message-color);
        margin-bottom: var(--notice-text-message-margin-bottom);
      }
    }
    @m icon {
      @e icon {
        position: absolute;
        @m success {
          color: var(--color-success);
        }
        @m info {
          color: var(--color-info);
        }
        @m warning {
          color: var(--color-warning);
        }
        @m danger {
          color: var(--color-danger);
        }
      }
      @e message {
        font-size: var(--notice-icon-message-font-size);
        color:  var(--notice-icon-message-color);
        margin-bottom: var(--notice-icon-message-margin-bottom);
        margin-left: var(--notice-icon-message-margin-left);
      }
      @e description {
        font-size: var(--notice-icon-description-font-size);
        color: var(--notice-icon-description-color);
        margin-left: var(--notice-icon-description-margin-left);
      }
    }
    @e close-x {
      position: absolute;
      right: 0.5rem;
      top: 0.5rem;
      box-sizing: border-box;
      padding: 0.25rem;
      border: none;
      outline: none;
      appearance: none;
      color: var(--notice-close-x-color);
      cursor: pointer;
      background-color: transparent;
      font-size: var(--notice-close-x-font-size);
      &:hover {
        color: var(--notice-close-x-hover-color);
      }
    }
  }
}